<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>炸弹</title>
        <style>
            .box{
                width: 400px;
                height: 400px;
                background-image: url("boomed.jpg");
                margin: 100px auto;
            }
            .boom{
                width: 400px;
                height: 257px;
                background-image: url("boom1.jpg");
                /*float: left;*/
            }
            .light{
                width: 20px;
                height: 20px;
                background-color: red;
                border-radius: 10px;
                position: relative;
                top: 188px;
                left: 235px;
            }
            .time{
                width: 119px;
                height: 45px;
                background-color: black;
                margin-top: 115px;
                margin-left: 145px;
            }
            .time>span{
                color: red;
                line-height: 45px;
                text-align: center;
                font-size: 24px;
            }
            .line{
                width: 400px;
                height: 143px;
                /*background-image: url("line.png");*/
            }
            .empty_box{
                width: 140px;
                height: 143px;
                background-color: white;
                float: left;
            }
            .line1{
                width: 40px;
                height: 143px;
                background-color: white;
                float: left;
            }
            .line1>img{
                float: right;
            }
        </style>
    </head>
    <body>
        <div class="box" id="box">  <!--外层盒子 -->
            <div class="boom" id="boom">      <!--炸弹盒子 -->
                <div class="light" id="light"></div>
                <div class="time" id="time_box">     <!--倒计时盒子 -->
                    <span id="time"></span>
                </div>
            </div>
            <div class="line" id="line">  <!--线盒子 -->
                <div class="empty_box"></div>
                <div class="line1" id="line1">
                    <img src="line.png">
                </div>
                <div class="line1" id="line3">
                    <img src="line.png">
                </div>
                <div class="line1" id="line2">
                    <img src="line.png">
                </div>
                <div class="empty_box"></div>
            </div>
        </div>
        <script>
            var light = document.getElementById('light');   //获得灯的dom对象
            var line = document.getElementById("line");     //获得线盒子的dom对象
            var box = document.getElementById("box");       //获取外层盒子的dom对象
            var boom = document.getElementById("boom");     //获取外层盒子的dom对象
            var time = document.getElementById("time");     //获取倒计时盒子的dom对象
            var line1 = document.getElementById("line1");
            var line2 = document.getElementById("line2");
            var line3 = document.getElementById("line3");

            var a = 0;      //添加一个变量
            // var second = 1000;      //设置初始时间间隔
            var number = 30;        //设置倒计时秒数

            var light_interval = setInterval(light_fc,1000);   //设置一个指示灯计时器，此时要把内置函数分离开，使计时器拥有时间间隔参数
            function light_fc() {       //计时器具体实现函数
                a += 1;     //变量自增
                if( a%2 === 0){     //如果是偶数
                    light.style.backgroundColor = "#32ee08";        //绿灯亮
                }else {
                    light.style.backgroundColor = "red";            //绿灯亮
                }
            }   //时间间隔100毫秒

            // 实现倒计时功能，并在10秒时候更改指示灯闪烁频率，最后在倒计时结束后产生爆炸效果
            var time_interval = setInterval(time_fc,1000);        //设置一个倒计时计时器
            function time_fc() {
                if(number<10){      //当秒数小于10
                    t = "0"+number; //补全两位数
                    // second = 100;   // 小于10秒，修改指示灯闪烁时间间隔
                    clearInterval(light_interval);  //先关闭指示灯计时器
                    light_interval = setInterval(light_fc,100);  //重新打开指示灯计时器，更新时间间隔（若直接把时间间隔设置为一个变量，此时修改时间间隔变量仍不会生效）
                }else {
                    t = number;
                }
                time.innerText = "00:00:"+t;    //添加时间文本
                if(number <= 0){        //当秒数为负数时
                    line.style.display = 'none';
                    boom.style.display = 'none';     //设置爆炸盒子图片隐藏，此时最外层盒子的爆炸效果图显示
                    clearInterval(time_interval);    //关闭倒计时计数器
                }else {
                    number-=1;      //时间秒数减一
                }
            }     //设置倒计时计数器时间间隔为1秒

            line1.onclick = function (ev) {     //第一根线点击触发事件，直接爆炸
                line.style.display = 'none';
                boom.style.display = 'none';
            }
            line3.onclick = function (ev) {     //第三根线点击触发事件，加速爆炸
                // alert(12)
                clearInterval(time_interval);
                clearInterval(light_interval);
                light_interval = setInterval(light_fc,100);
                time_interval = setInterval(time_fc,400);
            }
            line2.onclick = function (ev) {     //第二根线点击触发事件，拆弹成功
                time.innerText = "炸弹成功拆除";
                time.style.fontSize = "19px";
                time.style.color = "#1df804";
                clearInterval(time_interval);
                clearInterval(light_interval);
            }
        </script>
    </body>
</html>